﻿@namespace Project.Web.Shared.Components
@inherits JsComponentBase
<div style="width:fit-content;">
    <div style="display: flex;flex-direction: column;align-items: center;width:fit-content;">
        <div style="display: flex;align-items: center;justify-content: center;position:relative; width:@($"{WrapWidth}px");height:@($"{WrapHeight}px")">
            <div style="border:1px solid #ccc;position:absolute;padding:0;margin:0;width:@($"{Width}px");height:@($"{Height}px");transform:rotate(@(RotateDeg)deg)">
                <video @ref=videoDom style="width:100%;height:100%;object-fit:fill;"></video>
                <div @ref=clipDom style="position:absolute;border:1px solid red;display:none;resize: both;overflow: hidden;min-width:200px;min-height:100px;cursor:move;">
                </div>
            </div>
        </div>
    </div>
    @if (DeviceSelectorRender != null)
    {
        @DeviceSelectorRender(this)
    }
    else
    {
        <div style="text-align:center;margin-top:10px;">
            <div>
                @UI.BuildSelect(this, dropdownDevices).Bind(() => selectedDeviceId!).Set("Style", "width:200px;").Render()
                @UI.BuildButton(this).OnClick(Start).Text("开启").Primary().Set("Disabled", playButtonStatus).Render()
                @UI.BuildButton(this).OnClick(Stop).Text("关闭").Primary().Set("Disabled", !playButtonStatus).Render()
            </div>
            <div style="margin-top:10px;">
                @UI.BuildSelect(this, CameraOptions.ResolutionOptions).Bind(() => resolution).Set("Style", "width:200px;").Render()
                @UI.BuildButton(this).OnClick(() => Rotate++).Text("+90°").Primary().Set("Disabled", !playButtonStatus).Render()
                @UI.BuildButton(this).OnClick(() => Rotate--).Text("-90°").Primary().Set("Disabled", !playButtonStatus).Render()
                @UI.BuildButton(this).OnClick(Capture).Text("拍照").Primary().Set("Disabled", !playButtonStatus).Render()
            </div>
        </div>
    }
</div>